<template>
<div class="Query">
    <!--table布局-->
    <el-form ref="form" :model="form" :rules="rules" class="formEmbedTable">
      <table>
        <caption>填写查询信息</caption>
        <tr>
          <td>收款人：</td>
          <td>
            <el-form-item  prop="searchPayee">
              <el-input v-model="form.searchPayee" placeholder="收款人"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>收款行：</td>
          <td>
            <el-form-item  prop="searchBank">
              <el-input v-model="form.searchBank" placeholder="收款行"></el-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>币种：</td>
          <td>
            <el-form-item  prop="searchCRY">
              <el-select placeholder="币种"  v-model="form.searchCRY">
                <el-option label="CNY人民币" value="0"></el-option>
                <el-option label="EUR欧元" value="1"></el-option>
                <el-option label="GBP英镑" value="2"></el-option>
                <el-option label="HKD港币" value="3"></el-option>
                <el-option label="JPY日元" value="4"></el-option>
                <el-option label="USD美元" value="5"></el-option>
                <el-option label="SGD新加坡元" value="5"></el-option>
              </el-select>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td>金额范围：</td>
          <td>
            <el-form-item  prop="amtMin">
              <ynet-currency-input v-model="form.amtMin" name="amtMin" placeholder="最小金额" :showChinese="false"></ynet-currency-input>
            </el-form-item>
            <span>至</span>
            <el-form-item  prop="amtMax">
               <ynet-currency-input v-model="form.amtMax" name="amtMax" placeholder="最大金额" :showChinese="false"></ynet-currency-input>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td><span class="cRed">*</span>入账日期范围：</td>
          <td>
            <el-form-item  prop="startDateObj">
              <el-date-picker v-model="form.startDateObj" @change="form.startDate=$tools.utils.formatDate(form.startDateObj)" type="date" placeholder="开始日期"></el-date-picker>
            </el-form-item>
            <span>至</span>
            <el-form-item  prop="endDateObj">
              <el-date-picker v-model="form.endDateObj" @change="form.endDate=$tools.utils.formatDate(form.endDateObj)" type="date" placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </td>
        </tr>
      </table>
    </el-form>
    <!--table布局--END-->
    <div class="btnArea mt20 tac">
      <el-button type="primary" @click="submitForm()">查询</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </div>
    <!--查询表格-->
    <div class="tableData mt20">
      <el-table :data="tableData" stripe @select="select">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="网银流水号" prop="NO">
          <template  scope="scope">
            <a class="cBlue" @click="popWindow(scope.$index)">{{scope.row.bsnCode}}</a>
          </template>
        </el-table-column>
        <el-table-column label="收款人" prop="NO"></el-table-column>
        <el-table-column label="汇出金额" prop="NO"></el-table-column>
        <el-table-column label="汇出日期">
          <template  scope="scope">
            {{$tools.utils.formatDate(scope.row.currentTime,{'symbol':'YYYY-MM-DD'})}}
          </template>
        </el-table-column>
        <el-table-column label="币种" prop="NO"></el-table-column>
        <el-table-column label="是否代付" prop="NO"></el-table-column>
        <el-table-column label="状态" prop="NO"></el-table-column>
      </el-table>
    </div>
    <!--查询表格--END-->
    <!--分页-->
    <div class="pagination tar mt20">
      <el-pagination 
        @current-change="handleCurrentChange"
        :current-page="form.currentPage"
        :page-size="form.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!--分页--END-->
    <div class="btnArea mt20 tac">
        <el-button type="primary" @click="">打印</el-button>
        <el-button @click="">下载</el-button>
    </div>
    <!--弹窗-->
    <el-dialog title="详情" :visible.sync="dialogTableVisible">
      <div class="formEmbedTable">
        <table>
          <tr>
            <td>业务编号：</td>
            <td>{{popTableData.bsnCode}}</td>
            <td>收款人：</td>
            <td></td>
          </tr>
          <tr>
            <td>出账账号：</td>
            <td></td>
            <td>收款人账号：</td>
            <td></td>
          </tr>
          <tr>
            <td>出账金额：</td>
            <td>{{popTableData.cashAmount}}</td>
            <td>收款行：</td>
            <td></td>
          </tr>
          <tr>
            <td>出账币种：</td>
            <td></td>
            <td>账户行：</td>
            <td></td>
          </tr>
          <tr>
            <td>汇出金额：</td>
            <td></td>
            <td>是否代付：</td>
            <td></td>
          </tr>
          <tr>
            <td>汇出币种：</td>
            <td></td>
            <td>汇率：</td>
            <td></td>
          </tr>
          <tr>
            <td>汇出日期：</td>
            <td></td>
            <td>合同：</td>
            <td></td>
          </tr>
          <tr>
            <td>附言：</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">返回</el-button>
      </div>
    </el-dialog>
    <!--弹窗--END-->
</div>
</template>

<script>
export default {
  name:'Query',
  components: {
  },
  data() {
    return {
      form: {
          searchPayee:'',
          searchBank:'',
          searchCRY:'',
          amtMin:'',
          amtMax:'',
          startDate:'',
          startDateObj:'',
          endDate:'',
          endDateObj:'',
          pagesize:10,
          startPage:0,
          endPage:9,
          currentPage:1,
      },
      rules: {
        amtMin: [
          {trigger: 'blur', validator:this.$tools.validator.amountCompare,compareList:['amtMin','amtMax'],vm:this,formName:'form'}
        ],
        amtMax: [
          {trigger: 'blur', validator:this.$tools.validator.amountCompare,compareList:['amtMin','amtMax'],vm:this,formName:'form'}
        ],
        startDateObj: [
          {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'form'}
        ],
        endDateObj: [
          {trigger: 'blur', validator:this.$tools.validator.dateCompare,compareList:['startDateObj','endDateObj'],vm:this,formName:'form'}
        ],
      },
      tableData:[],
      dialogTableVisible:false,
      popTableData:{}
    }
  },
  methods: {
    submitForm(changePage) {
      let _this=this
      _this.$refs['form'].validate((valid) => {
        if (valid) {
          if(changePage){
            _this.form.currentPage=changePage
            _this.form.startPage=(_this.form.currentPage-1)*_this.form.pagesize
            _this.form.endPage=_this.form.currentPage*_this.form.pagesize-1
          }else{
            _this.form.currentPage=1
            _this.form.startPage=0
            _this.form.endPage=9
          }
          _this.requestTableList()
        } else {
          console.log('error submit!!')
          return false
        }
      });
    },
    resetForm() {
      let _this=this
      _this.$refs['form'].resetFields()
    },
    handleCurrentChange(currentPage){
      let _this=this
      _this.submitForm(currentPage)
    },
    requestTableList(){
      let _this=this
      _this.$tools.request(this,"CB050108.do",_this.form).then(data => {
        console.log(_this.form)
        _this.tableData=data.body.remitInfoList
      })

    },
    popWindow(index){
      let _this=this
      _this.dialogTableVisible=true
      _this.popTableData=_this.tableData[index]
      console.log(_this.popTableData)
    },
    select(selection, row){
      console.log(selection)
      console.log(row)
    }
  },
  mounted(){ 
  }
}
</script>